<template>
	<!-- 页面结构 -->
	<view class="container">
		<!-- 页面内容 -->
		<view class="content">
			<view class="title">下载APP</view>
			<view class="description">
				为了获得更好的体验，请下载我们的官方APP
			</view>

			<!-- 下载按钮 -->
			<button class="download-btn" @click="handleOpenDownPage()">
				立即下载
			</button>

			<!-- <button open-type="web-view" url="https://api.runyukang.cn/app/app.apk">下载App</button> -->

			<!-- 功能介绍 -->
			<view class="features">
				<view class="feature-item">
					<view class="feature-icon">✨</view>
					<view class="feature-text">更多独家内容</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">⚡</view>
					<view class="feature-text">更快的加载速度</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🔔</view>
					<view class="feature-text">及时的消息通知</view>
				</view>
			</view>

			<!-- 引导弹窗 -->
			<view v-if="showGuideModal" class="modal-container">
				<!-- 遮罩层 -->
				<view class="modal-mask" @click="handleHideGuideModal"></view>

				<!-- 弹窗内容 -->
				<view class="modal-content">
					<view class="modal-title">请在浏览器中打开</view>

					<!-- 操作步骤 -->
					<view class="steps">
						<view class="step-item">
							<view class="step-number">1</view>
							<view class="step-text">点击右上角 <view class="step-icon">...</view>
							</view>
						</view>
						<view class="step-item">
							<view class="step-number">2</view>
							<view class="step-text">选择 "在浏览器中打开"</view>
						</view>
						<view class="step-item">
							<view class="step-number">3</view>
							<view class="step-text">在打开的页面中下载APP</view>
						</view>
					</view>

					<!-- 平台提示 -->
					<view class="platform-tip">
						<view v-if="isIos">
							<text>iOS用户：</text>
							<text>选择 "在Safari中打开"</text>
						</view>
						<view v-else>
							<text>Android用户：</text>
							<text>建议使用Chrome浏览器</text>
						</view>
					</view>

					<!-- 关闭按钮 -->
					<button class="modal-close" @click="handleHideGuideModal()">
						我知道了
					</button>
				</view>
			</view>

		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				showGuideModal: false,
				isIos: false,
				// appurl: 'https://api.runyukang.cn/app/app.apk'
				appurl: 'https://api.runyukang.cn/h5'
			}
		},
		onLoad(options) {
			// 判断设备类型
			// const systemInfo = wx.getSystemInfoSync();
			// this.isIos = systemInfo.platform === 'ios'
		},
		methods: {
			// 显示引导弹窗
			handleShowGuideModal() {
				this.showGuideModal = true
			},

			// 隐藏引导弹窗
			handleHideGuideModal() {
				this.showGuideModal = false
			},
			
			handleOpenDownPage() {
				uni.navigateTo({
					url: `/pages/guide/down`
				});
			}
		}
	}
</script>

<style>
	/* 页面样式 */
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40px;
	}

	/* 内容区域 */
	.content {
		padding: 40px 30px;
		text-align: center;
	}

	.title {
		font-size: 24px;
		font-weight: 500;
		color: #333;
		margin-bottom: 16px;
	}

	.description {
		font-size: 16px;
		color: #666;
		line-height: 1.5;
		margin-bottom: 40px;
	}

	/* 下载按钮 */
	.download-btn {
		width: 80%;
		margin: 0 auto;
		height: 50px;
		line-height: 50px;
		background: linear-gradient(to right, #ff6b6b, #ff8e8e);
		color: #fff;
		border-radius: 25px;
		font-size: 18px;
		margin-bottom: 60px;
	}

	/* 功能介绍 */
	.features {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.feature-item {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		background-color: #fff;
		padding: 15px 20px;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		width: 80%;
	}

	.feature-icon {
		font-size: 24px;
		margin-right: 15px;
	}

	.feature-text {
		font-size: 16px;
		color: #333;
	}

	/* 弹窗样式 */
	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 85%;
		background-color: #fff;
		border-radius: 15px;
		padding: 30px 20px;
		box-sizing: border-box;
		text-align: center;
	}

	.modal-title {
		font-size: 20px;
		font-weight: 500;
		color: #333;
		margin-bottom: 25px;
	}

	/* 步骤样式 */
	.steps {
		margin-bottom: 25px;
	}

	.step-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		text-align: left;
	}

	.step-number {
		width: 30px;
		height: 30px;
		line-height: 30px;
		background-color: #ff6b6b;
		color: #fff;
		border-radius: 50%;
		font-size: 16px;
		text-align: center;
		margin-right: 15px;
	}

	.step-text {
		font-size: 16px;
		color: #333;
		flex: 1;
	}

	.step-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #333;
		color: #fff;
		border-radius: 3px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		margin: 0 5px;
	}

	/* 平台提示 */
	.platform-tip {
		background-color: #f8f8f8;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 30px;
		font-size: 14px;
		color: #666;
		text-align: left;
	}

	.platform-tip text:first-child {
		font-weight: 500;
		color: #333;
	}

	/* 关闭按钮 */
	.modal-close {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: #ff6b6b;
		color: #fff;
		border-radius: 22px;
		font-size: 16px;
	}
</style>